<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title></title>
		<script src="js/jquery-2.1.4.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/mui.min.js"></script>
    	<link href="css/mui.min.css" rel="stylesheet"/>
    	<link href="css/style.css" rel="stylesheet"/>
	</head>
	<body>
		<div class="container">
			<header class="mui-bar mui-bar-nav layout-bg">
			    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left l-arrow"></a>
			    <h1 class="mui-title">注册商户</h1>
			     <a class="mui-pull-right header-login">登录</a>
			</header>
			
			<div class="reg-title layout-gap">
				<div class="auth-text reg-span">基本资料</div>
			</div>
			
			<div class="reg-wrapper">
				<form class="auth-data">
					<div class="mui-flex bor-b">
					<div class="cell fixed">
						<span class="auth-text reg-min">姓名</span>
					</div>
					<div class="cell">
						<input class="auth-input" type="text" name="name" value="" placeholder="请填写真实姓名" />
					</div>
					</div>
					<div class="mui-flex bor-b">
						<div class="cell fixed">
							<span class="auth-text reg-min">身份证</span>
						</div>
						<div class="cell">
							<input class="auth-input" type="text" name="id_card" value="" placeholder="请填写18位身份证号码" />
						</div>
					</div>
					<div class="mui-flex bor-b">
						<div class="cell fixed">
							<span class="auth-text reg-min">性别</span>
						</div>
						<a href="#popover" id="openPopover" class="cell">
							<input class="auth-input" readonly="readonly" type="text" name="gender" value="" placeholder="请选择性别" />
						</a>
					</div>
					<div class="mui-flex bor-b">
						<div class="cell fixed">
							<span class="auth-text reg-min">手机号码</span>
						</div>
						<div class="cell">
							<input class="auth-input" maxlength="11" type="number" name="phone" value="" placeholder="请输入手机号码" />
						</div>
					</div>
					<!--<div class="mui-flex bor-b">
						<div class="cell fixed">
							<span class="auth-text reg-min">验证码</span>
						</div>
						<div class="cell">
							<input class="auth-input" type="number" name="salt" value="" placeholder="请输入验证码" />
						</div>
						<div class="cell fixed">
							<button type="button" id="phone-mess" class="reg-salt">获取验证码</button>
						</div>
					</div>-->
					<div class="mui-flex bor-b">
						<div class="cell fixed">
							<span class="auth-text reg-min">登录密码</span>
						</div>
						<div class="cell">
							<input class="auth-input" type="password" name="password" value="" placeholder="请输入登录密码" />
						</div>
					</div>
					<div class="mui-flex bor-b">
						<div class="cell fixed">
							<span class="auth-text reg-min">确认密码</span>
						</div>
						<div class="cell">
							<input class="auth-input" type="password" name="confirm-password" value="" placeholder="确认登录密码" />
						</div>
					</div>
				</form>
			</div>
			
			<div class="reg-agreement">
				<div class="reg-checkbox reg-checkbox-check"></div>
				我同意<a>《软件许可及服务协议》</a>和<a>《保密协议》</a>
			</div>
			
			<button type="button" class="auth-btn layout-bg">立即注册</button>
			
			<div id="popover" class="mui-popover">
			  <ul class="mui-table-view">
			    <li class="mui-table-view-cell">男</li>
			    <li class="mui-table-view-cell">女</li>
			  </ul>
			</div>
		</div>
		
		<script type="text/javascript">
			$(function() {
				$('.service-list').on('click', function() {
					var $this = $(this);
					$this.find('.service-item').toggleClass('service-item-check');
				});
				
				$('.reg-checkbox').on('click', function() {
					var $this = $(this);
					$this.toggleClass('reg-checkbox-check');
				});
				
				// 选择性别
				$('.mui-table-view-cell').on('click', function() {
					var is_gender = $(this).text();
					$('input[name="gender"]').val(is_gender);
					
					$('.mui-popover').removeClass('mui-active').hide();
					$('.mui-backdrop.mui-active').hide();
				});
				
				// 验证手机号
				var reg_phone = /^1[3|4|5|7|8][0-9]{9}$/; //验证规则
				$('input[name="phone"]').on('keyup', function() {
					var phone_num = $.trim($('input[name="phone"]').val());
					
					if (reg_phone.test($(this).val())) {
						$('.reg-salt').addClass('reg-salt-check');
					} else {
						$('.reg-salt').removeClass('reg-salt-check');
					}
				});
				
				// 获取验证码
				$('.reg-salt').on('click', function() {
					var phone_num = $.trim($('input[name="phone"]').val());
					
					if (phone_num == '') {
						mui.toast('请输入手机号码');
						return;
					}
					
					if (!reg_phone.test(phone_num)) {
						mui.toast('您输入的手机号格式不对');
						return;
					}

                    settime();
				});

                //  短信验证码发送时间
                var countdown = 59;
                var this_input = document.getElementById("phone-mess");

                function settime() {
                    if (countdown == '-1') {
                        this_input.removeAttribute("disabled");
                        this_input.innerHTML = "短信验证码";
                        countdown = 59;
                    } else {
                        this_input.setAttribute("disabled", true);
                        this_input.innerHTML = "重新发送(" + countdown + ")";
                        countdown--;
                        setTimeout(function () {
                            settime()
                        }, 1000)
                    }
                }

                // 上传图片(正面)
                $('#card-face').on('change', function () {

                    // 上传


                    // 预览
                    viewImage('card-face', 'card-face-box', 'card-image', '');
                });

                // 背面
                $('#card-side').on('change', function () {

                    // 上传


                    // 预览
                    viewImage('card-side', 'card-side-box', 'card-image', '');
                });

                // 资质图片

                $('#qual-upload').on('change', function() {
                    viewImage('qual-upload', 'qual-upload-box', 'card-image', '');
                });
				
				// 点击注册
				$('.auth-btn.layout-bg').on('click', function() {
					var param = $('.auth-data').serializeObject();

					if (param.name == '' || param.id_card == '' || param.gender == '' || param.phone == '' || param.password == '' || param.confirm_password == '') {
						mui.toast('请填写完整');
						return;
					}

                    var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                    if(!reg.test(param.id_card))
                    {
                        mui.toast("身份证输入不合法");
                        return;
                    }
                });
                
                mui('.mui-bar-nav').on('tap', '.header-login', ()=> {
                	mui.openWindow({
                		url: 'login.html',
                		id: 'login.html'
                	})
                })
			})
		</script>
	</body>
</html>
